<template>
  <div>
    <!-- pc -->
    <div class="wrap" v-if="innerWidth > 500">
      <div class="fixed u-flex">
        <img class="hand img" src="../../../image/index/back.png" @click="back">
        <img src="@/image/russia/logo2.png" class="logo">
        俄数通
      </div>
      <div class="fixed_hei"></div>
      <div class="info">
        <div class="table">
          <!-- 搜索框 -->
          <div class="sea u-flex u-col-between">
            <input type="text" v-model="keyWords" @keyup.enter="handleSearch" placeholder="请输入关键字" />
            <div class="sea_zhan"></div>
            <div class="sea_btn u-flex-center hand" @click="handleSearch">搜索</div>
          </div>
          <!-- 表格 -->
          <a-table class="a_table" :bordered="true" :locale="{ emptyText: '暂无数据' }" v-if="!isLoading"
            rowKey="article_id" :defaultExpandAllRows="true" :columns="columns" :dataSource="dataSource"
            :expandIconColumnIndex="1" :pagination="pagination" :loading="isLoading" :scroll="{ x: 1300 }">
            <template #bodyCell="{ text, record, index, column }">
              <!-- 采购商 -->
              <span v-if="column.dataIndex === 'store_name'" :style="{ color: '#2C6BD8' }">{{ text }}</span>
              <span v-else>{{ text }}</span>
            </template>
          </a-table>
        </div>
        <!-- 分页 -->
        <div v-if="dataSource.length > 0" class="pagination">
          <a-pagination :current="pagination.current" :pageSize="pagination.pageSize" :total="pagination.total"
            :locale="locale" :show-quick-jumper="true" :show-size-changer="false" @change="handleTableChange" />
        </div>
      </div>
    </div>
    <!-- 手机端 -->
    <div v-else>
      <!-- 导航栏 -->
      <div class="pho">
        <PhoHead topIndex="det"></PhoHead>
        <div class="cont">
          <!-- 搜索框 -->
          <div class="sea u-flex u-col-between">
            <input type="text" v-model="keyWords" @keyup.enter="handleSearch" placeholder="请输入关键字" />
            <div class="sea_zhan"></div>
            <div class="sea_btn u-flex-center hand" @click="handleSearch">搜索</div>
          </div>
          <!-- 表格 -->
          <a-table :bordered="true" :locale="{ emptyText: '暂无数据' }" v-if="!isLoading" rowKey="article_id"
            :defaultExpandAllRows="true" :columns="columns" :dataSource="dataSource" :expandIconColumnIndex="1"
            :pagination="pagination" :loading="isLoading" :scroll="{ x: '1300px' }">
            <template #bodyCell="{ text, record, index, column }">
              <!-- 采购商 -->
              <span v-if="column.dataIndex === 'store_name'" :style="{ color: '#2C6BD8' }">{{ text }}</span>
              <span v-else>{{ text }}</span>
            </template>
          </a-table>
          <div class="tip">向左滑动可查看更多</div>
          <!-- 分页 -->
          <div v-if="dataSource.length > 0" class="pagination">
            <a-pagination :current="pagination.current" :pageSize="pagination.pageSize" :total="pagination.total"
              :locale="locale" :show-quick-jumper="true" :show-size-changer="false" @change="handleTableChange" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";

export default {
  data() {
    return {
      // 正在加载
      isLoading: false,
      // 表头
      columns: [
        {
          title: "采购商",
          dataIndex: "store_name",
          width: "300px",
        },
        {
          title: "中文",
          align: "center",
          dataIndex: "category_name",

        },
        {
          title: "采购商所在国或地区",
          dataIndex: "nation",
          align: "center",
        },
        {
          title: "交易次数",
          dataIndex: "num",
          align: "center",
        },
        {
          title: "交易次数%",
          align: "center",
          dataIndex: "num_percentage",
        },
        {
          title: "金额（美元USD）",
          dataIndex: "money",
          align: "center",
        },
        {
          title: "金额（美元USD）%",
          align: "center",
          dataIndex: "money_percentage",
        },
        {
          title: "毛重(KGS)",
          dataIndex: "weight",
          align: "center",
        },
        {
          title: "毛重(KGS)%",
          align: "center",
          dataIndex: "weight_percentage",
        },
      ],
      // 信息列表
      dataSource: [],
      // 分页
      pagination: {
        total: 0, // 总数据量
        current: 1, // 当前页码
        pageSize: 14, // 每页显示条数
        showQuickJumper: true, // 是否可以快速跳转
      },
      locale: {
        items_per_page: "每页条数：",
        jump_to: "跳转至",
        page: "页",
        jump_to_confirm: "确认跳转",
        next_page: "下一页",
        prev_page: "上一页",
        first_page: "首页",
        last_page: "尾页",
      },
      keyWords: "", //搜索框
      innerWidth: 0
    };
  },
  mounted() {
    // 从查询参数中获取 userId
  },
  created() {
    this.innerWidth = window.innerWidth
    this.store = useStore();
    if (this.$route.query.keyWords) {
      this.keyWords = this.$route.query.keyWords;
      // this.getCategoryList();
    }
    // 获取信息列表
    this.getCategoryList();
  },
  methods: {
    // 获取信息列表
    getCategoryList() {
      this.store
        .dispatch("home/statisticsApi", {
          page: this.pagination.current,
          per_page: this.pagination.pageSize,
          search: this.keyWords,
        })
        .then((res) => {
          if (res.status == 200) {
            this.dataSource = res.data.list.data;
            this.pagination.total = res.data.list.total;
          }
        });
    },
    // 处理表格分页变化的事件
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination;
      this.getCategoryList(); //采购商品列表
    },
    // 搜索按钮
    handleSearch() {
      this.getCategoryList();
      // this.keyWords=''
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style>

</style>
<style lang="less" scoped>
// 表格头部
::v-deep .ant-table-thead>tr>th {
  color: #fff;
  background: #2b60b6;
  border-bottom: 1px solid #2b60b6;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

// 隐藏table自带的分页
::v-deep .ant-table-pagination.ant-pagination {
  display: none;
}

// 表格去掉圆角
::v-deep :where(.css-dev-only-do-not-override-1hsjdkk).ant-table-wrapper .ant-table-container table>thead>tr:first-child>*:first-child {
  border-start-start-radius: 0px !important;
}

/* 修改表格行的默认鼠标悬浮样式 */
::v-deep table tbody tr:hover>td {
  background-color: #edf4ff !important;
  /* 你想要设置的背景色 */
}

::v-deep .ant-table-thead>tr>th {
  border-bottom: none !important;
  /* 去掉表头的底部边框 */
}

::v-deep .ant-table-thead>tr>th:not(:last-child) {
  border-right: none !important;
  /* 去掉中间列之间的右边框 */
}

::v-deep .ant-table-expanded-row-fixed {
  padding: 100px 0;
}

// 分页
::v-deep .ant-pagination .ant-pagination-item {
  border-radius: 3px;
  border: 1px solid #ccc;
  /* 设置每一项的边框 */
}

/* 设置选中的边框 */
::v-deep .ant-pagination-item-active {
  border: 1px solid #1677ff !important;
}

@media screen and (max-width: 1650px) {
  .info {
    width: 1240px !important;
  }
}

@media screen and (max-width: 1500px) {
  .info {
    width: 1100px !important;
  }

  .fixed {
    font-size: 16px !important;


    .img {
      width: 11px !important;
    }

    .logo {
      width: 40px !important;
      margin: 0 16px !important;
    }
  }
}

@media screen and (max-width: 1366px) {
  .info {
    width: 1000px !important;
  }

  .fixed {
    font-size: 14px !important;

    .img {
      width: 10px !important;
    }

    .logo {
      width: 35px !important;
      margin: 0 14px !important;
    }
  }
}

@media screen and (max-width: 1250px) {
  .info {
    width: 900px !important;
  }
}

@media screen and (max-width: 1150px) {
  .info {
    width: 800px !important;
  }
}

@media screen and (max-width: 1000px) {
  .info {
    width: 700px !important;
  }
}

@media screen and (max-width: 900px) {
  .info {
    width: 650px !important;
  }
}

.wrap {
  min-height: 100vh;
  background: #f7f8fa;
}

.fixed {
  width: 100%;
  position: fixed;
  font-size: 20px;
  color: #333;
  height: 60px;
  line-height: 60px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0 56px;
  background-color: #fff;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.16);

  .img {
    width: 13px;
    margin-right: 6px;
  }

  .logo {
    width: 45px;
    margin: 0 20px;
  }
}

.fixed_hei {
  height: 80px;
}

.info {
  width: 1440px;
  margin: 0 auto;
}

.table {
  margin: 0 auto;
  background: #fff;
  padding: 46px 20px 20px;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

  .sea {
    width: 240px;
    overflow: hidden;
    position: relative;
    margin-bottom: 32px;

    input {
      flex: 1;
      height: 32px;
      border: none;
      outline: none;
      font-size: 12px;
      border: 1px solid #ccc;
      border-radius: 2px 0 0 2px;
      padding: 0 10px;
      box-sizing: border-box;
      background: transparent;
    }

    .sea_zhan {
      width: 60px;
      height: 32px;
    }

    .sea_btn {
      width: 62px;
      height: 32px;
      font-size: 14px;
      position: absolute;
      right: 0px;
      top: 0px;
      color: #fff;
      border-radius: 0 2px 2px 0;
      bottom: 0px;
      background: #2b60b6;
    }
  }

  .a_table {
    width: 100%;
    margin: 0 auto;
  }
}

.pagination {
  text-align: right;
  padding-top: 46px;
}

// 手机端
.pho {

  .cont {
    padding: 20px 8px 60px 8px;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

    .sea {
      width: 240px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      margin-bottom: 32px;

      input {
        flex: 1;
        height: 30px;
        border: none;
        outline: none;
        font-size: 12px;
        border: 1px solid #ccc;
        border-radius: 2px 0 0 2px;
        padding: 0 10px;
        box-sizing: border-box;
        background: transparent;
      }

      .sea_zhan {
        width: 60px;
        height: 30px;
      }

      .sea_btn {
        width: 62px;
        height: 30px;
        font-size: 12px;
        position: absolute;
        right: 0px;
        top: 0px;
        color: #fff;
        border-radius: 0 2px 2px 0;
        bottom: 0px;
        background: #2b60b6;
      }
    }
  }

  .tip {
    color: #c4c3c3;
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
  }

  .pagination {
    text-align: right;
    padding-top: 30px;
  }
}
</style>